<template>
    <div style="overflow: hidden;">
        <el-row type="flex" justify="space-between" class="mb-10">
            <span>Vesset:{{ info.shipName }}</span>
            <span>VoyNo:{{ info.voyage }}</span>
            <span>Nationlity:PRC</span>
            <span>Port of loading:{{ info.portName }}</span>
            <span>Loading completed on:{{ info.taskTime }}</span>
        </el-row>
        <div style="display: flex;flex-direction: column-reverse;height:600px;width: 1050px">
            <div v-for="(row,r) in maxRow" class="print-flex stowage-row stowage-reverse">
                <div v-for="(bay,b) in row" class="stowage-bay" v-if="b%2===0" :style="'width:'+width+'px;'">
                    <div v-for="(tier,t) in bay" class="stowage-tier" style="position: relative;" :style="'height:'+height+'px;'+'width:'+width+'px;'">
                        <div v-if="tier.bayNo%2!==0" style="margin-top: -6px;overflow: hidden;">
                            <div v-show="tier.containerId"
                                 style="transform: scale(0.49);margin-top: 2px;margin-left: -7px;" :style="'font-size:'+totalFontSize+'px;'">
                                {{ tier.containerId }}
                            </div>
                            <div v-show="tier.containerId" style="transform: scale(0.49);margin-top: -11px;white-space:nowrap;" :style="'font-size:'+totalFontSize+'px;'">
                                {{ tier.ef }}/{{ tier.containerType }}
                                <span v-if="tier.ef === 'F'"  :style="'font-size:'+totalFontSize+'px;'">/{{ Math.round(tier.weight) }}T</span></div>
                        </div>
                        <div v-else class="stowage-even" :style="'display:'+tier.style+';'+'width:'+totalWidth+'px;'+'height:'+evenHeight+'px;'" style="overflow: hidden;">
                            <div v-show="tier.containerId" style="transform: scale(0.49);margin-top: -4px;" :style="'font-size:'+totalFontSize+'px;'">
                                {{tier.containerId }}
                            </div>
                            <div v-show="tier.containerId" style="transform: scale(0.49);margin-top: -11px;white-space:nowrap;" :style="'font-size:'+totalFontSize+'px;'">
                                {{ tier.ef }}/{{ tier.containerType }}
                                <span v-if="tier.ef === 'F'" :style="'font-size:'+totalFontSize+'px;'">/{{ Math.round(tier.weight) }}T</span>
                            </div>
                        </div>

                        <!--<div v-show="tier.containerId">{{ tier.containerId }}</div>-->
                        <!--<div v-show="tier.containerId">{{ tier.ef }}/{{ tier.containerType }}</div>-->
                        <div v-show="r===0&&t===0" class="stowage-no">
                            {{ (b/2)+1 }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-20" style="margin-top:40px;">
            <span>Actual Total: <span v-if="form.size2e>0 || form.size4e>0 || form.size2>0 || form.size4>0">外贸</span>
                <span v-if="form.size2e>0">{{ form.size2e }}*20E</span>
                <span v-if="form.size4e>0">{{ form.size4e }}*40E</span>
                <span v-if="form.size2>0">{{ form.size2 }}*20F</span>
                <span v-if="form.size4>0">{{ form.size4 }}*40F</span>
                <span v-if="form.insize2e>0 || form.insize4e>0 || form.insize2>0 || form.insize4>0">, 内贸</span>
                <span v-if="form.insize2e>0">{{form.insize2e}}*20E</span>
                <span v-if="form.insize4e>0">{{form.insize4e}}*40E</span>
                <span v-if="form.insize2>0">{{form.insize2}}*20F</span>
                <span v-if="form.insize4>0">{{form.insize4}}*40F</span>
            </span>
            <div>Remark:{{ form.remark }}</div>
        </div>
    </div>
</template>

<script>
    import {
        getStowage,
        getShipPlanId
    } from "@/api/shipPlan/shipPlan";

    export default {
        name: "stowage",
        data() {
            return {
                id: '',
                table: [],
                maxRow: 0,
                maxBay: 0,
                maxTier: 0,
                form: {},
                info: {},
                height: '15',
                width : '52',
                totalWidth : '100',
                totalFontSize : '7',
                evenHeight : '13'
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.id = this.$route.params.id
                getShipPlanId(this.id).then(text => {
                    this.info = text.data
                    getStowage(this.id).then(res => {
                        this.table = res.data.container
                        this.form = res.data
                        let get = {
                            maxRow: res.data.maxRow,
                            maxBay: res.data.maxBay,
                            maxTier: res.data.maxTier,
                        }
                        let tier = [];
                        for (let i = 0; i < get.maxRow; i++) {
                            tier.push({
                                containerNo: "",
                                type: ""
                            });
                        }
                        let bay = [];
                        for (let i = 0; i < get.maxBay + 1; i++) {
                            bay.push(tier);
                        }
                        let row = [];
                        for (let i = 0; i < get.maxTier; i++) {
                            row.push(bay);
                        }
                        this.maxRow = JSON.parse(JSON.stringify(row))
                        let newBay = res.data.container;
                        for (let i = 0; i < newBay.length; i++) {
                            if (newBay[i].bayNo % 2 === 0) {
                                this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo)]
                                    .splice(
                                        newBay[i].rowNo - 1,
                                        1, {
                                            containerId: newBay[i].containerId,
                                            containerType: newBay[i].containerType,
                                            ef: newBay[i].ef,
                                            weight: newBay[i].weight,
                                            bayNo: Number(newBay[i].bayNo),
                                        }
                                    );
                                this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) + 1]
                                    .splice(
                                        newBay[i].rowNo - 1,
                                        1, {
                                            containerId: newBay[i].containerId,
                                            containerType: newBay[i].containerType,
                                            ef: newBay[i].ef,
                                            bayNo: Number(newBay[i].bayNo),
                                            weight: newBay[i].weight,
                                            style: "none"
                                        }
                                    );
                                // console.log(newBay[i].tierNo - 1)
                                // console.log(newBay[i].bayNo - 1)
                                // console.log(newBay[i].rowNo - 1)
                                // console.log(this.maxRow)
                                // console.log(this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) -
                                //     1
                                // ][newBay[i].rowNo - 1])
                                // console.log(this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) +
                                //     1
                                // ][newBay[i].rowNo - 1])
                            } else {
                                // console.log(newBay[i]);
                                // console.log(newBay[i].rowNo);
                                this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) - 1]
                                    .splice(
                                        newBay[i].rowNo - 1,
                                        1, {
                                            containerId: newBay[i].containerId,
                                            containerType: newBay[i].containerType,
                                            ef: newBay[i].ef,
                                            weight: newBay[i].weight,
                                            bayNo: Number(newBay[i].bayNo)
                                        }
                                    );
                            }
                        }
                        let totalNumber = 520
                        if (this.maxRow[0][0].length > 5){
                            totalNumber =480
                        }
                        let number=Number(totalNumber/this.maxRow.length).toFixed(2)
                        console.log(number)
                        number = Number(number/this.maxRow[0][0].length).toFixed(2)
                        console.log(this.maxRow)
                        console.log(this.maxRow[0][0].length)
                        console.log(number)
                        let totalWidth = 1050
                        let tWidth = (this.maxRow[0].length/2)+1
                        let widtha = Number(totalWidth/tWidth).toFixed(2)
                        this.width = widtha
                        console.log(widtha)
                        this.totalWidth = (Number(widtha)*2).toFixed(2)-4
                        if (tWidth < 15){
                            this.totalFontSize = 13
                            this.evenHeight = number - 1
                        }
                        
                        this.height = ''+ (parseFloat(number));
                        this.$nextTick(() => {
                            window.print()
                            window.close()
                        })
                    })
                })
            },
            handlePrint() {
                // console.log('打印')
            }
        },
        filters: {
            odd(index) {
                let newVal = index + 1;
                let val = newVal + index
                if (val < 10) {
                    return "0" + val;
                } else {
                    return val;
                }
            },
        }
    }

</script>

<style scoped>
    .stowage-row {
        margin-bottom: 5px;
        border-left: 1px solid;
    }

    .stowage-reverse {
        justify-content: flex-end;
        flex-direction: row-reverse;
    }

    .stowage-bay {
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        border-top: 1px solid;
    }

    .stowage-tier {
        border-bottom: 1px solid;
        border-right: 1px solid;
        font-size: 8px;
        text-align: center;
    }

    .stowage-no {
        position: absolute;
        top: 32px;
        left: 30px;
        transform: translate(-50%, -50%);
    }

    .stowage-even {
        position: relative;
        z-index: 88;
        background: #f3f3f3;
        left: 1px;
    }

</style>
